import { defineComponent, ref, watch, type PropType } from 'vue'
import { LeftOutlined, SearchOutlined } from '@ant-design/icons-vue'
import homeIcons from '../../assets'

interface IStyle {
  color?: string
  fontSize?: string
  backgroundColor?: string
}
export default defineComponent({
  props: {
    text: {
      type: Object as PropType<IStyle>
    },
    showSearch: {
      type: Boolean,
      default: false
    },
    title: {
      type: String
    },
    showShare: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    const textStyle = ref<IStyle>({
      fontSize: '14px',
      color: '#48494D',
      backgroundColor: 'white'
    })

    watch(
      props,
      () => {
        textStyle.value = Object.assign(textStyle.value, props.text)
      },
      { deep: true, immediate: true }
    )
    return () => (
      <>
        <header class="h-10 w-full flex items-center justify-between px-4 " style={textStyle.value}>
          <span>
            <LeftOutlined class="text-base relative top-0.5" />
          </span>
          <span class="text-base  font-medium">{props.title}</span>
          <span>
            <SearchOutlined class="text-base" v-show={props.showSearch} />
            <img src={homeIcons.icon_share} alt="" class="w-5 h-5" v-show={props.showShare} />
          </span>
        </header>
      </>
    )
  }
})
